import React, { useState, useEffect } from 'react'
// 引入 CitySelect 组件
import CitySelect from 'react-city-select';
import api from "../../../api"
import { setCity } from "../../../redux/actions/city"

export default function CityView ({ dispatch }) {

  const [citysData, setCitysData] = useState({})

  useEffect(() => {
    api.city().then(res => {
      if (res.data.status === 200) {
        setCitysData(res.data.result)
      }
      // console.log(res.data);
    }).catch(error => {
      console.log(error);
    })    
  }, [])

  
  // 选中城市回调
  function handleSelectCity (cityData) {
    console.log('选中数据项:', cityData);
    dispatch(setCity(cityData.name));
    window.history.back();
  }


  return (
    <CitySelect
      // 传入数据
      data={citysData.indexCitys}
      // 传入配置
      // config={this.state.config}
      // 传入回调
      onSelectItem={handleSelectCity.bind(this)}>
    </CitySelect>
    // <div>视图</div>
  )
}
